<template>
  <div class="page-container">
    <div class="common-content-wrap">
      <TrTable
        isNeedSelection
        :btnList="btnList"
        :total="totalNum"
        v-model="searchParams"
        :searchShowList="searchShowList"
        :searchHideList="searchHideList"
        :tableColumn="tableColumn"
        requestName="searchHandle"
        :tableData="assTableData"
        @export="operateHandle($event, 'export')"
        @select-change="changeHandle"
      />
    </div>
  </div>
</template>

<script>
import { getList } from "@/api/baseCode/receptacle";
import { getEnum } from "@/api/system/dict";
import { getColor } from "@/utils/billColor";
import TrTable from "@/components/Tr-table/Tr-table.vue";

export default {
  components: {
    TrTable,
  },
  name: "ReceptacleBox",
  data: () => ({
    tableColumn: [
      {
        type: "text",
        label: "容器编码",
        value: "containerCode",
      },
      {
        type: "text",
        label: "容器名称",
        value: "containerName",
      },
      {
        type: "text",
        label: "容器类型",
        value: "containerType",
      },
      {
        type: "text",
        label: "容器状态",
        value: "containerStatusLabel",
      },
      {
        type: "text",
        label: "创建人员",
        value: "createUserName",
      },
      {
        type: "text",
        label: "创建时间",
        value: "createTime",
      },
    ],
    searchShowList: [
      {
        isNeed: true,
        startStr: "createTimeStart",
        endStr: "createTimeEnd",
        id: "createdTime",
        type: "daterange",
        width: 80,
        label: "创建时间",
        value: [],
        radio: 1,
        timePeriod: true,
      },
    ],
    searchHideList: [
      {
        id: "containerCode",
        type: "input",
        width: 33.33,
        label: "容器编码",
        value: "",
      },
      {
        id: "containerName",
        type: "input",
        width: 33.33,
        label: "容器名称",
        value: "",
      },
      {
        id: "containerStatusList",
        type: "multiSelect",
        width: 33.33,
        label: "容器状态",
        value: [],
        list: [],
      },
    ],
    btnList: [
      {
        label: "导出",
        option: "export",
        color: "blue",
      },
    ],
    assTableData: [],
    checkList: [],
    formObj: {
      containerStatusList: [],
    },
    formData: {},
    searchParams: {
      current: 1,
      size: 10,
    },
    totalNum: 0,
  }),
  methods: {
    operateHandle(val, type) {
      switch (type) {
        case "export":
          this.$exportHandle({ vm: this, params: this.searchParams });
          break;
        default:
          break;
      }
    },
    changeHandle(val) {
      console.log(val);
      this.checkList = val;
    },
    searchHandle() {
      console.log("查询", this.searchParams);
      this.getMenuList();
    },
    getEnum() {
      getEnum(["containerStatus"]).then((res) => {
        if (res.data.code != 200) return;
        let containerStatus = this.$findByProperty(
          this.searchHideList,
          "id",
          "containerStatusList"
        );
        this.$set(containerStatus, "list", res.data.data[0].list);
      });
    },
    getMenuList() {
      getList(this.searchParams).then((res) => {
        if (res.data.code != 200) return;
        this.$validateData(res.data.data.records);
        this.assTableData = res.data.data.records;
        this.assTableData.forEach((item) => {
          item["containerStatusLabelColor"] = getColor(
            "RQCX",
            item.containerStatus
          );
        });
        this.totalNum = res.data.data.total;
      });
    },
  },
  mounted() {
    // this.getMenuList();
    this.getEnum();
  },
};
</script>

<style></style>
